<template>
  <view style="padding: 10px;">
    <view class="list-item">
      <text>头像</text>
	  <view class="vertical-middle">
	  	   
		   <image class="avatar" :src="userInfo.avatar || '/static/missing-face.png'"></image>
	  		 <uni-icons type="right" size="22" color="grey"></uni-icons>
	  </view>
	
    </view>
	
	<view class="list-item">  
	    <text>昵称</text>  
	    <view class="vertical-middle">  
	      <text @click="editNickname" v-if="!editingNickname">{{ userInfo.nickName }}</text>  
	      <input type="text" v-model="nickname" v-if="editingNickname" @confirm="confirmEditNickname" @blur="cancelEditNickname" />  
	      <uni-icons type="right" size="22" color="grey" v-if="!editingNickname"></uni-icons>  
	    </view>  
	  </view>  
	

  </view>


  
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo, updateInfo } from '@/api/user.js'
import { userInfo } from 'os';

export default {
  data() {
    return {
      userInfo: null,
      editingNickname: false,
      nickname: ''
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    editNickname() {
      this.editingNickname = true;
      this.nickname = this.userInfo.nickName;
    },
    // 修改 confirmEditNickname 方法
    confirmEditNickname() {
      if (this.nickname && this.nickname !== this.userInfo.nickName) {
        // 构造更新用户信息的对象
        const updateData = {
          avatar: this.userInfo.avatar,
          nickName: this.nickname,
          password: this.userInfo.password,
          userId: this.userInfo.userId,
          sex: this.userInfo.sex,
          status: this.userInfo.status,
          userName: this.userInfo.userName,
          userType: this.userInfo.userType
        };
        // 发送更新用户信息的请求，并传递 userId 参数
        updateInfo(updateData, this.userInfo.userId)
          .then(res => {
            if (res.code === 200) {
              this.editingNickname = false;
              this.userInfo.nickName = this.nickname;
			 
            } else {
              console.error('更新昵称失败:', res);
            }
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
      } else {
        this.editingNickname = false;
      }
    },

    cancelEditNickname() {
      this.editingNickname = false;
    },
    loadData() {
      // 此处获取用户信息的方法，根据你的实际情况调整
      // 示例中使用了 getUserInfo 方法，需替换为你的实际方法
      getUserInfo().then(res => {
        if (res.code === 200) {
          this.userInfo = res.user;
        }
      });
    }
  },
  created() {
    this.loadData();
  }
};


</script>

<style>



.list-item {
	height: 120upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10upx;
  color: #fff;
  font-size: 30rpx;
 
}

.vertical-middle{
	display: flex;
	align-items: center;
  }

.arrow-icon {
  width: 20upx;
  height: 20upx;
}

.avatar {
  width: 80upx;
  height: 80upx;

  border-radius: 50%;
}

</style>
